<template>
  <div class="ManagementHome">
    <layout>
      <layout :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
            <Footer  style="background-color:  #5b6270">
              <Row>
                <Col span="20"><h3>后台管理系统</h3></Col>
              </Row>
              <Row>
                <Col span="22">
                    &nbsp
                </Col>
                <Col span="2">
                  <Col span="16">
                    <h5 style="color: #0000FF" v-if="userInfo.username!=null">
                      你好!{{userInfo.username}}
                    </h5>
                  </Col>
                  <Col span="8">
                  <Dropdown style="margin-left: 20px">
                      <a href="javascript:void(0)">
                        <Avatar icon="ios-person" size="large" ></Avatar>
                      </a>
                    <DropdownMenu slot="list">
                      <DropdownItem>个人资料</DropdownItem>
                      <DropdownItem>修改密码</DropdownItem>
                      <DropdownItem><a :href="logoutUrl">退出登入</a></DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                  </Col>
                </Col>
              </Row>
            </Footer>
          </layout>
      <Layout :style="{minHeight: '100vh'}">
        <Sider collapsible :collapsed-width="0" v-model="isCollapsed">
          <Menu @on-select="routeComponent" theme="light" width="auto" :class="menuitemClasses">
            <template  v-for="(item, index) in menuNameList">
              <template v-if="item.isJump==1&&item.pid==0">
                <Submenu :name="item.url">
                  <template slot="title">
                    <Icon :type="item.icon" />
                    {{item.name}}
                  </template>
                  <template  v-for="(item2, index2) in menuNameList">
                    <template v-if="item2.isJump==1&&item2.pid==item.id">
                      <Submenu :name="item2.url">
                        <template slot="title">
                          <Icon :type="item.icon" />
                          {{item2.name}}
                        </template>
                        <template  v-for="(item3, index3) in menuNameList">
                          <template v-if="item3.isJump==0&&item3.pid==item2.id">
                            <MenuItem :name="item3.url">
                                <Icon :type="item3.icon" />
                                {{item3.name}}
                            </MenuItem>
                          </template>
                        </template>
                      </Submenu>
                    </template>
                    <template v-else-if="item2.pid==item.id">
                      <MenuItem :name="item2.url" >
                          <Icon :type="item2.icon" />
                          {{item2.name}}
                      </MenuItem>
                    </template>
                  </template>
                </Submenu>
              </template>
              <template v-else-if="item.pid==0">
                <MenuItem :name="item.url" >
                    <Icon :type="item.icon" />
                    {{item.name}}
                </MenuItem>
              </template>
            </template>
          </Menu>
        </Sider>
        <Content :style="{padding: '0 16px 16px'}">
          <Card>
            <template v-if="rountUrlName=='home'">
              <home-main/>
            </template>
            <template v-if="rountUrlName=='adminUser'">
              <admin-user/>
            </template>
            <template v-if="rountUrlName=='roleAndPermissionManage'">
              <role-and-permission-manage/>
            </template>
            <template v-if="rountUrlName=='permissionResourceManage'">
              <permission-resource-manage/>
            </template>
            <template v-if="rountUrlName=='swagger'">
              <iframe style="width:100%;height:1000px" scrolling=auto :src="swaggerUrl"></iframe>
            </template>
            <template v-if="rountUrlName=='chatWithAi'">
              <ChatWithAi/>
            </template>
            <template v-if="rountUrlName=='pictureWithAi'">
              <PictureWithAi/>
            </template>
            <template v-if="rountUrlName=='clashFile'">
              <ClashFile/>
            </template>
          </Card>
        </Content>
      </Layout>
    </layout>
  </div>
</template>

<script lang="ts">
import {getLoginUserInfoUrl, homeMenuUrl, logoutUrl, swaggerUrl } from '@/common/HttpRequestUrl'
import {Component, Vue} from 'vue-property-decorator'
import HomeMain from '@/components/HomeMain.vue'
import AdminUser from '@/components/AdminUser.vue'
import RoleAndPermissionManage from "@/components/RoleAndPermissionManage.vue"
import PermissionResourceManage from "@/components/PermissionResourceManage.vue";
import ChatWithAi from "@/components/ChatWithAi.vue";
import PictureWithAi from "@/components/PictureWithAi.vue";
import ClashFile from "@/components/ClashFile.vue";

@Component({
  components: {
    HomeMain,
    AdminUser,
    RoleAndPermissionManage,
    PermissionResourceManage,
    ChatWithAi,
    PictureWithAi,
    ClashFile
  }
})
export default class ManagementHome extends Vue {

  logoutUrl = logoutUrl
  swaggerUrl = swaggerUrl
  isCollapsed= false
  menuNameList = []
  rountUrlName = 'home'
  userInfo = {} //  用户信息

  // 初始化方法
  mounted () {
    let objThis = this
    //  加载管理界面菜单列表
    this.axios.get(homeMenuUrl).then(function (res) {
      if (res.data.status) {
        objThis.menuNameList = res.data.data
      }
    })
    //  加载用户登录信息
    this.axios.get(getLoginUserInfoUrl).then(function (res) {
      objThis.userInfo = res.data.data
    })
  }

  menuitemClasses (){
    return [
      'menu-item',
      this.isCollapsed ? 'collapsed-menu' : ''
    ]
  }
  // 板块路由
  routeComponent (name):void {
    this.rountUrlName = name
  }
}
</script>
<style>
h3{
  font-family: 华文仿宋;
  font-size: 42px;
  color: #f5f7f9;
}
</style>
